<template>
    <div class="container_box">
        <div class="content_box flexC">
            <ul class="flex colorF textC font_s20 main_title">
                <li class="flex1">序号</li>
                <li class="flex2">组织名称</li>
                <li class="flex2">接收渠道</li>
                <li class="flex5">违规内容（必填）</li>
                <li class="flex2">投诉日期</li>
                <li class="flex2">处理时间</li>
                <li class="flex5">处理结果</li>
            </ul>
            <ul class="scrollBar" style="height:63.5vh;overflow:auto;">
                <li class="flex textC colorF font_s18 main_content" v-for="item in dataList" v-bind:key="item.id">
                    <span class="flex1">{{item.xh}}</span>
                    <span class="flex2 flex AlignItemsC" style="line-height:1.485rem;">{{item.zzmc}}</span>
                    <span class="flex2 flex AlignItemsC" style="line-height:1.485rem;">{{item.jsqd}}</span>
                    <span class="flex5 textL flex AlignItemsC" style="line-height:1.485rem;"><span>{{item.wgnr}}</span></span>
                    <span class="flex2">{{item.tsrq}}</span>
                    <span class="flex2">{{item.clsj}}</span>
                    <span class="flex5 textL flex AlignItemsC" style="line-height:1.485rem;">{{item.cljg}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      dataList: [
        {
          xh: 1,
          zzmc: '上海市东方职业技术培训协会',
          jsqd: '市民政局移送群众举报',
          wgnr: '该协会涉嫌超业务范围吸纳新理事单位，招募理事单位、会员单位时存在不规范行为',
          tsrq: '2019-1-12',
          clsj: '2019-1-15',
          cljg: '我们将进一步通过约谈、年检的方式，加强对该协会监督与管理，并要求该协会开展会员单位、理事单位自查'
        },
        {
          xh: 1,
          zzmc: '上海市东方职业技术培训协会',
          jsqd: '市民政局移送群众举报',
          wgnr: '该协会涉嫌超业务范围吸纳新理事单位，招募理事单位、会员单位时存在不规范行为',
          tsrq: '2019-1-12',
          clsj: '2019-1-15',
          cljg: '我们将进一步通过约谈、年检的方式，加强对该协会监督与管理，并要求该协会开展会员单位、理事单位自查'
        },
        {
          xh: 1,
          zzmc: '上海市东方职业技术培训协会',
          jsqd: '市民政局移送群众举报',
          wgnr: '该协会涉嫌超业务范围吸纳新理事单位，招募理事单位、会员单位时存在不规范行为',
          tsrq: '2019-1-12',
          clsj: '2019-1-15',
          cljg: '我们将进一步通过约谈、年检的方式，加强对该协会监督与管理，并要求该协会开展会员单位、理事单位自查'
        },
        {
          xh: 1,
          zzmc: '上海市东方职业技术培训协会',
          jsqd: '市民政局移送群众举报',
          wgnr: '该协会涉嫌超业务范围吸纳新理事单位，招募理事单位、会员单位时存在不规范行为',
          tsrq: '2019-1-12',
          clsj: '2019-1-15',
          cljg: '我们将进一步通过约谈、年检的方式，加强对该协会监督与管理，并要求该协会开展会员单位、理事单位自查'
        },
        {
          xh: 1,
          zzmc: '上海市东方职业技术培训协会',
          jsqd: '市民政局移送群众举报',
          wgnr: '该协会涉嫌超业务范围吸纳新理事单位，招募理事单位、会员单位时存在不规范行为',
          tsrq: '2019-1-12',
          clsj: '2019-1-15',
          cljg: '我们将进一步通过约谈、年检的方式，加强对该协会监督与管理，并要求该协会开展会员单位、理事单位自查'
        },
        {
          xh: 1,
          zzmc: '上海市东方职业技术培训协会',
          jsqd: '市民政局移送群众举报',
          wgnr: '该协会涉嫌超业务范围吸纳新理事单位，招募理事单位、会员单位时存在不规范行为',
          tsrq: '2019-1-12',
          clsj: '2019-1-15',
          cljg: '我们将进一步通过约谈、年检的方式，加强对该协会监督与管理，并要求该协会开展会员单位、理事单位自查'
        },
        {
          xh: 1,
          zzmc: '上海市东方职业技术培训协会',
          jsqd: '市民政局移送群众举报',
          wgnr: '该协会涉嫌超业务范围吸纳新理事单位，招募理事单位、会员单位时存在不规范行为',
          tsrq: '2019-1-12',
          clsj: '2019-1-15',
          cljg: '我们将进一步通过约谈、年检的方式，加强对该协会监督与管理，并要求该协会开展会员单位、理事单位自查'
        },
        {
          xh: 1,
          zzmc: '上海市东方职业技术培训协会',
          jsqd: '市民政局移送群众举报',
          wgnr: '该协会涉嫌超业务范围吸纳新理事单位，招募理事单位、会员单位时存在不规范行为',
          tsrq: '2019-1-12',
          clsj: '2019-1-15',
          cljg: '我们将进一步通过约谈、年检的方式，加强对该协会监督与管理，并要求该协会开展会员单位、理事单位自查'
        },
        {
          xh: 1,
          zzmc: '上海市东方职业技术培训协会',
          jsqd: '市民政局移送群众举报',
          wgnr: '该协会涉嫌超业务范围吸纳新理事单位，招募理事单位、会员单位时存在不规范行为',
          tsrq: '2019-1-12',
          clsj: '2019-1-15',
          cljg: '我们将进一步通过约谈、年检的方式，加强对该协会监督与管理，并要求该协会开展会员单位、理事单位自查'
        },
        {
          xh: 1,
          zzmc: '上海市东方职业技术培训协会',
          jsqd: '市民政局移送群众举报',
          wgnr: '该协会涉嫌超业务范围吸纳新理事单位，招募理事单位、会员单位时存在不规范行为',
          tsrq: '2019-1-12',
          clsj: '2019-1-15',
          cljg: '我们将进一步通过约谈、年检的方式，加强对该协会监督与管理，并要求该协会开展会员单位、理事单位自查'
        }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.container_box {
  width: 95%;
  height: 88%;
  margin: 0 auto;
  .content_box {
      padding: 0 3.285rem;
      .main_title {
          background: #2954DA;
          line-height: 2.425rem;
          border-radius: 8px 8px 0 0;
      }
      .main_content {
          background: #1E40AA;
          border-radius: 8px;
          line-height: 4.875rem;
          margin-top: 0.825rem;
      }
  }
  .scrollBar {
      overflow: auto;
  }
  .scrollBar::-webkit-scrollBar {
      width: 8px;
      border-radius: 10px;
      background-color: rgba($color: #ffffff, $alpha: 0.6)
  }
  .scrollBar::-webkit-scrollBar-thumb {
      border-radius: 10px;
      background-color: rgba($color: #3659f3, $alpha: 0.8)
  }
}
</style>
